<template>
    <div class="box" @click="goDefine">
    <div class="word">
      <div class="word1">
      <span class="year">二0二一学年第二学期</span>
      </div>
    </div>
    <div class="photo">
      <div class="photo1">
        <img src="../../../assets/images/growReport.jpg">
        <div class="state">
        <span class="state1">已完成</span>
        </div>
        <div class="Info">
        <span class="name">张昊   </span>
        <span class="lesson">一年纪二班</span>
        </div>
      </div>
    </div>
   </div>
</template>

<script>
//import {getRport} from "@/api/index1"
export default {
    methods:{
    goDefine(){
      this.$router.push('/define')
   }
 }
  }

</script>

<style lang="scss" scoped>
/*文字背景框*/
.word{
   height:18.75rem;
   width:2.625rem;
   background: #f5f5f5;
}
/*文字框*/
.word1{
   display: flex;
   width:1rem;
   line-height: 1.875rem;
   margin-left: .8125rem;
   text-align: center;
}
/*文字*/
.year{
font-size:1rem;
color:#7C0000;
}
/*照片框*/
.photo{
   border:.0625rem solid #7C0000;
   border-style: dashed;
   height:18.5rem;
   width:13.5625rem;
   margin-left:1.0625rem;
}
/*包括学期和成长报告的盒子*/
.box{
   display: flex;
   width: 25%;
   position: relative;
}
/*成长报告封面照片*/
.photo img{
   height:18.375rem;
   width:13.4375rem;
}
/*完成状态*/
.state{
    background:#f2e5e5;
    border-radius: .25rem;
    width:3.625rem;
    height:1.5625rem;
    text-align: center;
    position:absolute;
    z-index:2;
    top:8.9375rem;right:.875rem;
}
/*文字制作中*/
.state1{
    font-size:.875rem;
    line-height: 1.5625rem;
}
/*包成长报告和里面文字的盒子 */
.photo1{
    position: relative;
}
/*学生信息*/
.photo1 .Info{
    position: absolute;
    bottom: 3.125rem;right:1.25rem;
    width: 2.5rem;
    flex-wrap: wrap;
}
.name{
    font-size:.25rem;
    width: 60%;
}
.lesson{
    display: flex;
    font-size:.25rem;
    width: 12.5rem;
}
</style>